<template>
    <div style="margin: 0px auto; padding:10px 0; width:50%">
        <div style="display: flex; grid-gap: 20px; margin-bottom: 40px">
            <img :src="goods.img" alt="" style="width: 50%; height:400px;  display: block">
            <div style="flex: 1; width: 0" >
                <el-tooltip :content="goods.name" placement="top-start">
                 <div style="font-size: 26px; font-weight: bold; margin: 20px 0" class="line1">{{goods.name}}</div>
                </el-tooltip>
                <div style="color: #666; font-size: 16px">
                    <span>浏览量{{goods.readCount}}</span>
                    <span style="margin-left: 20px;">点赞量{{goods.likesCount}}</span>
                    <span style="margin-left: 20px;">收藏量{{goods.collectCount}}</span>
                </div>
                <div style="color: #29ad54; font-size: 24px; margin: 40px 0">￥{{goods.price}}</div>
                <div style="margin-bottom:20px "><span style="color: #666">发货地:</span>{{goods.address}}</div>
                <div style="margin-bottom:20px "><span style="color: #666">卖家:</span>{{goods.userName}}</div>
                <div style="margin-bottom:40px "><span style="color: #666">发布日期:</span>{{goods.date}}</div>
                <div>
                    <el-button v-if="!goods.userLikes"  @click="addLikes" size="medium" style="background-color: #569960; color: #f8f8f8; border-color: #28ab4d">点赞</el-button>
                    <el-button v-if="goods.userLikes"  @click="addLikes" size="medium" style="background-color: #569960; color: #f8f8f8; border-color: #28ab4d">已点赞</el-button>
                    <el-button v-if="!goods.userCollect" @click="addCollect" size="medium" style="background-color: #71b673; color: #f8f8f8; border-color: #5baa79">收藏</el-button>
                    <el-button v-if="goods.userCollect" @click="addCollect" size="medium" style="background-color: #71b673; color: #f8f8f8; border-color: #5baa79">已收藏</el-button>
                    <el-button size="medium" style="background-color: #428653; color: #f8f8f8; border-color: #5dbd59">立即购买</el-button>
                </div>
            </div>
        </div>

        <div>
            <div style="display: flex; border-bottom: 1px solid #f8f8f8; margin:20px ">
                <div style="padding: 10px 20px; cursor: pointer" :class="{'active' : current === '商品详情'}" @click="changeItem('商品详情')">商品详情</div>
                <div style="padding: 10px 20px; cursor: pointer" :class="{'active' : current === '商品评论'}" @click="changeItem('商品评论')">商品评论</div>
            </div>

            <div v-if="current === '商品详情'">
                <div v-html="goods.content"></div>
            </div>

            <div v-if="current === '商品评论'" class="card">
                <Comment :fid="id" module="goods" />
            </div>
        </div>
    </div>
</template>

<script>
    import Comment from "@/components/Comment";
    export default {
        name: "GoodsDetail",
        components:{Comment},
        data() {
            return{
                id: this.$route.query.id,
                goods:{},
                current: '商品详情'
            }
        },
        created() {
            //先更新浏览数再更新商品数
            this.$request.put('/goods/updateReadCount/' + this.id).then(res => {
                this.load()
            })
        },
        methods:{
            addCollect(){
                this.$request.post('/collect/add/', {fid: this.goods.id, module: 'goods'}).then(res=>{
                    if(res.code=== '200'){
                        this.$message.success('操作成功')
                        this.load()
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            addLikes(){
                this.$request.post('/likes/add/', {fid: this.goods.id, module: 'goods'}).then(res=>{
                    if(res.code==='200'){
                        this.$message.success('操作成功')
                        this.load()
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            changeItem(current){
                this.current=current;
            },
            load(){
                this.$request.get('/goods/selectById/' + this.id).then(res =>{
                    this.goods = res.data || {}
                })
            },
        }
    }
</script>

<style scoped>
 .active{
     background-color: #5baa79;
     color: #f8f8f8;
 }
</style>